<template>
  <HeadContainer :title="$t('title.resetPwd')" disable-back>
    <template #default>
      <div class="gap-col-24">
        <div class="gap-col-16">
          <div>
            <div>
              <InputWrap
                v-model="password.value"
                :label="$t('label.password')"
                :placeholder="$t('placeholder.password')"
                :err-msg="password.error"
                password
                @focus="password.error = ''"
              ></InputWrap>
              <PasswordStrength :password="password.value"></PasswordStrength>
            </div>
            <InputWrap
              v-model="confirmPassword.value"
              :label="$t('label.confirmPassword')"
              :placeholder="$t('placeholder.confirmPassword')"
              :err-msg="confirmPassword.error"
              password
              @focus="confirmPassword.error = ''"
            ></InputWrap>
          </div>
          <PasswordValidation
            :password="password.value"
            @update:validate="(v) => (validation = v)"
          ></PasswordValidation>
        </div>
        <div>
          <BlockButton :label="$t('label.confirmResetPwd')" :is-gradient="false" @click="confirm" />
          <p v-show="serverError" class="font-size-14 font-weight-500 line-height-140 text-primary-x text-end">
            {{ serverError }}
          </p>
        </div>
      </div>
    </template>
  </HeadContainer>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { onKeyStroke } from '@vueuse/core'
import { useNavStore } from '@/store/nav'
import { usePopupMessageStore } from '@/store/popup-message'
import { $t } from '@/i18n'
import { useYup, validate } from '@/plugins/yup'
import BlockButton from '@/components/button/BlockButton.vue'
import InputWrap from '@/components/form/InputWrap.vue'
import PasswordStrength from '@/components/form/PasswordStrength.vue'
import PasswordValidation from '@/components/form/PasswordValidation.vue'
import HeadContainer from '@/components/layout/HeadContainer.vue'
import API from '@/http'

const navStore = useNavStore()
const { toHome } = navStore

const { open } = usePopupMessageStore()

const route = useRoute()
const token = route.query.token

if (!token) {
  toHome()
}

const password = reactive({
  value: '',
  error: '',
  check: false,
})

const confirmPassword = reactive({
  value: '',
  error: '',
  check: false,
})

const { string } = useYup()
const validation = ref(false)
const schema = string().required().min(8).complexPassword()

async function confirm() {
  const schemaConfirm = string().required().oneOf([password.value], { key: 'yup.string.confirmPassword' })
  try {
    await validate(schema, password)
    await validate(schemaConfirm, confirmPassword)

    if (!validation.value || !password.check || !confirmPassword.check) return

    await resetPassword()
  } catch (e) {
    console.error(e)
  }
}

const serverError = ref('')
async function resetPassword() {
  try {
    const data = { new_password: password.value, reset_token: token }
    await API.Auth.resetPassword({ data })
    toHome()
    open($t('message.resetPwdSuccess'))
  } catch (e) {
    console.error(e)
    serverError.value = e.message
  }
}

onKeyStroke('Enter', confirm)
</script>
